<template>
    <div class="form_top">
        <div class="switchPage">
            <div class="checkAll">
                <el-checkbox v-model="checkAll" @change="handleCheckAllChange">当前页</el-checkbox>
            </div>
            <div class="shareAccountConfiguration">
                <ShareAccountConfiguration :no-need-loading="true" :type="5" />
            </div>
        </div>

        <div class="btnList">
            <el-button v-auth="'BATCH_LABEL'" plain :disabled="selection.length === 0" @click="batchTag"
                >批量标签</el-button
            >
            <el-button v-auth="'BATCH_DEL'" plain :disabled="selection.length === 0" @click="batchDel"
                >批量删除</el-button
            >
            <el-button v-auth="'UP_DATA'" type="primary" @click="openUpload">上传文件</el-button>
        </div>
    </div>
    <!-- 标签弹框 -->
    <ZWSelectTag ref="formSelectRef" page-type="text" @submit="getTags" />
</template>

<script setup lang="ts">
import { ref, reactive, computed, onBeforeUnmount, toRefs } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import bus from '@/utils/bus';
import ZWSelectTag from '@/components/ZWSelectTag.vue';
import ShareAccountConfiguration from '@/components/common/ShareAccountConfiguration.vue';
const formSelectRef = ref(null);

import { useStore } from '@/store';
const store = useStore();
import router from '@/router';

const emit = defineEmits(['batchTag', 'batchDel', 'batchDown', 'openUpload']);
const selection = computed(() => {
    return store.getters['table'].tableData;
});
const checkAll = ref(false); // 是否为全选
// 1-文本 2-图片 3-音频 4-视频 5-文件 6-链接文章 7-链接引用
const props = defineProps(['type']);
const { type } = toRefs(props);
// 选中的图片内容
const changeList = ref([]);
// 打开选择标签
const batchTag = () => {
    formSelectRef.value.batchTag = true;
    formSelectRef.value.appDialog.visible = true;
    formSelectRef.value.appDialog.title = '批量标签';
    formSelectRef.value.selectTags = [];
};
// 获取标签
const getTags = (data: any) => {
    emit('batchTag', {
        tag_ids: data.tag_ids,
        defaultVal: data.defaultVal
    });
};
// 删除
const batchDel = () => {
    emit('batchDel');
};
const openUpload = () => {
    const params = {
        type: 5,
        uploadVisib: true,
        title: '上传文件',
        isPdf: false,
        isEdit: false
    };
    bus.emit('editItem', params);
    emit('openUpload');
    bus.emit('upPic');
    store.dispatch('content/tagsInfo', {
        showCreatTag: true
    });
};
// 当前页和全部页的切换
const options = [
    {
        value: '当前页',
        label: '当前页'
    },
    {
        value: '全部页',
        label: '全部页'
    }
];
// 全选部分
const change = (data: any) => {
    changeList.value = data;
};
bus.on('change', change);
const autoCheckedAll = (value: boolean) => {
    checkAll.value = value;
};
bus.on('autoCheckedAll', autoCheckedAll);
const handleCheckAllChange = (value: boolean) => {
    bus.emit('checkAll', value);
};
// 销毁监听事件
onBeforeUnmount(() => {
    bus.off('change', change);
    bus.off('autoCheckedAll', autoCheckedAll);
});
</script>

<style lang="scss" scoped>
.form_top {
    display: flex;
    justify-content: space-between;

    .switchPage {
        display: flex;
        align-items: center;

        .page {
            width: 110px;
            height: 36px;
        }

        .checkAll {
            padding: 0 12px;
            background: #f9f9f9;
            border-radius: 1px;
            border: 1px solid #eaeaea;
        }

        .shareAccountConfiguration {
            margin-left: 16px;
        }

        .course {
            width: 100px;
            height: 37px;
            margin-left: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ff6b00;
            background: #fffaf9;
            border-radius: 2px;
            border: 1px solid #ffc69e;
            cursor: pointer;

            &_icon {
                margin-right: 8px;
                margin-top: 5px;
            }
        }
    }

    .btnList {
        display: flex;
        align-items: center;

        &_item {
            width: 80px;
            height: 36px;
            margin-left: 20px;
            line-height: 36px;
            text-align: center;
            color: #ff6b00;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #ff6b00;
            cursor: pointer;
        }
    }

    .radio_list {
        &_item {
            &_text {
                margin-top: -3px;
            }

            &_icon {
                width: 14px;
                height: 14px;
                margin: -3px 0 0 6px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        :deep .el-radio__label {
            display: flex;
            align-items: center;
        }
    }

    .tags {
        &_title {
            margin: 10px 0;
        }

        &_list {
            display: flex;
            flex-wrap: wrap;

            &_item {
                color: #969696;
                padding: 4px 10px;
                background: #fff;
                border: 1px solid #eaeaea;
                margin-right: 16px;
                margin-bottom: 10px;
                cursor: pointer;
            }

            .checked {
                border: 1px solid #ff6b00;
                color: #ff6b00;
            }
        }
    }

    .radio_img {
        margin-top: -24px;
    }

    .Picture_bounced {
        :deep .el-tag {
            color: #ff6b00;
            background: #fffaf9;
            border-radius: 2px;
            margin-right: 6px;
            border: 1px solid #ffc69e;

            .el-tag__close {
                color: #ff6b00;
            }

            .el-tag__close:hover {
                background: none;
                color: #ff6b00;
            }
        }
    }
}
</style>
